<template>
  <div class="wangpan">
    <div class="daohang">
      <div class="btu" @click="drawer = true">上传</div>
      <div class="btu" @click="xiazai">下载</div>
      <div class="btu" @click="open">新建文件夹</div>
      <div class="btu" @click="shanchu">删除</div>
      <div class="btu" @click="fengxiang">分享</div>
    </div>
    <div class="wenjian">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      >全选</el-checkbox>
      &nbsp;&nbsp;已选择{{checkedCities.length}}个文件&nbsp;/&nbsp;共{{cities.length}}个文件
      <el-button size="mini" type="warning" title="返回上一级文件夹" @click="shangyiye">上一页</el-button>

      <div class="gd">
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
          v-if="cities.length>0"
        >
          <div
            v-for="(item,index) in cities"
            :key="index"
            @contextmenu.prevent="mouseclick(item.file.name,item.file.type)"
          >
            <el-checkbox class="el-checkbox1" fill="#000" :label="item.file.name">
              <div class="item">
                <img :src="poot+'manongyizhanFile/filelogo/'+item.file.src+'.png'" />
                &nbsp;&nbsp;&nbsp;
                <font class="font2">{{item.file.name}}</font>
                <font class="font1">{{item.file.memory}}</font>
                <font class="font1">{{item.file.time}}</font>
              </div>
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
    </div>

    <el-drawer
      title="文件上传"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="20%"
    >
      <div class="shangchuan">
        <el-upload
          class="upload-demo"
          drag
          :action="poot+'fileUpload'"
          multiple
          :data="pdfData"
          :on-success="handleAvatarSuccess1"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">只能上传1GB以下文件</div>
        </el-upload>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      cities: [],
      isIndeterminate: true,
      drawer: false,
      direction: "rtl",
      list: [],
      wenjiantype: 0,
      url: "网盘",
      urlfh: ["网盘"],
      pdfData: {
        mailbox: "gg",
        url: "gg"
      },
      index: 0
    };
  },
  methods: {
    fengxiang(){
          const h = this.$createElement;
      this.$notify({
        title: "温馨提示",
        message: h("i", { style: "color: teal" }, "努力开发中。。。。")
      });
    },
    open() {
        this.$prompt('请输入文件夹名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '文件夹名称: ' + value
          });
          this.newfolder(value)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
    handleAvatarSuccess1() {
      this.chushihua();
    },
    shangyiye() {
      if (this.index > 0) {
        this.url = this.urlfh[this.index];
        this.index--;
        this.chushihua();
      } else {
      }
    },
    mouseclick(where, type) {
      const h = this.$createElement;
      this.$notify({
        title: "温馨提示",
        message: h("i", { style: "color: teal" }, "鼠标右键下载文件/打开文件夹")
      });
      if (type == "wjj") {
        this.index++;
        this.urlfh[this.urlfh.length] = this.url;
        this.url = this.url + "/" + where;
        this.chushihua();
      } else {
        this.download(where);
      }
    },
    newfolder(name){
      this.$http
        .post(this.poot + "newfolder", {
          url: this.url+"/"+name,
          mailbox: this.user
        })
        .then(response => {
         this.chushihua()
        })
        .catch(error => {
          console.log(error);
        });
    },
    chushihua() {
      console.log(this.url);
      this.pdfData.mailbox = this.user;
      this.pdfData.url = this.url;
      this.list = [];
       this.checkAll= false
      this.checkedCities= []
      this.cities=[]
      this.isIndeterminate= false
      this.$http
        .post(this.poot + "selectfileList", {
          url: this.url,
          mailbox: this.user
        })
        .then(response => {
          this.cities = response.data;
          for (var i = 0; i < this.cities.length; i++) {
            this.list[i] = this.cities[i].file.name;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    shanchu() {
      for (var i = 0; i < this.checkedCities.length; i++) {
        this.$http
          .post(this.poot + "delete", {
            url: this.url + "/" + this.checkedCities[i],
            mailbox: this.user
          })
          .then(response => {
            this.chushihua();
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    xiazai() {
      for (var i = 0; i < this.checkedCities.length; i++) {
        this.download(this.checkedCities[i]);
        console.log(this.checkedCities[i]);
      }
    },
    download(name) {
      console.log(this.url);
      // window.open(this.poot + "download");
  
      this.$http
        .post(
          this.poot + "download",
          {
            url: this.url,
            mailbox: this.user,
            filename: name
          },
          { responseType: "blob" }
        )
        .then(response => {
          let blob = new Blob([response.data], { type: response.data.type });
          let downloadElement = document.createElement("a");
          let href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = name; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放blob对象
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleClose(done) {
      done();
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.list : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      console.log(this.checkedCities);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    }
  },
  computed: {
    ...mapState(["leixing"]),
    ...mapState(["poot"]),
    ...mapState(["user"])
  },
  mounted() {
    this.chushihua();
    const h = this.$createElement;
    this.$notify({
      title: "温馨提示",
      message: h("i", { style: "color: teal" }, "鼠标右键下载文件/打开文件夹")
    });
  }
};
</script>
<style scoped>
.el-button {
  background-color: #161616;
  border: 1px #ffd04b solid;
  margin-left: 50%;
  color: #fff;
  height: 30px;
  width: 100px;
}
.shangchuan {
  width: 300px;
}
.font2 {
  width: 400px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.font1 {
  margin-left: 100px;
  width: 80px;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
}
img {
  height: 20px;
  margin-left: 20px;
}
.el-checkbox {
  margin-left: 20px;
  padding-top: 20px;
}
.el-checkbox1 {
  margin-left: 20px;
  padding-top: 20px;
  display: flex;
  align-items: center;
}
.gd::-webkit-scrollbar {
  display: none;
}
.gd {
  overflow: auto;
  height: 650px;
}
.wenjian {
  margin-top: 20px;
  height: 700px;
  background-color: #1e1e1e;
}
.btu:nth-child(1) {
  border-radius: 7px 0 0 7px;
}
.btu:nth-child(5) {
  border-radius: 0 7px 7px 0;
}
.btu {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 30px;
  background-color: #161616;
  border: #ffd04b 1px solid;
  color: #fff;
}
.daohang {
  margin-top: 10px;
  display: flex;
  width: 1000px;
  text-align: left;
}

.wangpan {
  background-color: #161616;
  width: 100%;
  height: 780px;
  padding: 20px;
}
</style>